<template>
	<div class="cljk-table box" :style="{height:tableH+'vh',width:'100%'}">
		<div class="false-box">
			<div class="scroll-box" :style="{'height': scollBoxHeight + 'px'}">
				<!-- scroll-box是用来撑起盒子的方法 -->
			</div>
		</div>
		<div class="table-box">
			<el-table :data="tableData" border style="width: 100%;" :header-row-style="{height:'30px'}"
				:header-cell-style="{
		    textAlign: 'center',
		    height: '30px',
		}" size="mini" ref="editTable" :row-class-name="tableAddClass" :height="'100%'">

				<el-table-column prop="cheliangpaizhao" label="车牌号" width="130" ></el-table-column>
				<el-table-column prop="chepaiyanse" label="车牌颜色" width="100" ></el-table-column>
				<el-table-column prop="shiyongxingzhi" label="车辆类型" width="120" ></el-table-column>
				<el-table-column prop="gpstime" label="定位时间" width="150" ></el-table-column>
				<el-table-column prop="locate" label="ACC状态" width="120">
					<template slot-scope="scope">
						{{scope.row.locate===1?'已定位':'未定位'}}
					</template>
				</el-table-column>
				<el-table-column prop="alarmnote" label="报警" width="200" show-overflow-tooltip></el-table-column>
				<el-table-column prop="angle" label="方向" width="120"></el-table-column>
				<el-table-column prop="velocity" label="速度" width="120">
					<template slot-scope="scope">
						{{scope.row.velocity+' km/h'}}
					</template>
				</el-table-column>
				<el-table-column prop="elevation" label="海拔" width="120"></el-table-column>
				<el-table-column prop="distSum" label="行驶里程" width="120">
					<template slot-scope="scope">
						<span v-if="scope.row.distSum">
							{{(scope.row.distSum-sourceTableData[0].distSum).toFixed(3)+' km'}}
						</span>
						<span v-else>
							{{0+' km'}}
						</span>
					</template>
				</el-table-column>
				<el-table-column prop="distTotal" label="总里程" width="120">
					<template slot-scope="scope">
						{{scope.row.distTotal+' km'}}
					</template>
				</el-table-column>
				<el-table-column prop="mileage" label="终端里程" width="120">
					<template slot-scope="scope">
						{{scope.row.mileage+' km'}}
					</template>
				</el-table-column>
				<el-table-column prop="driverName" label="驾驶员" width="120"></el-table-column>
				<el-table-column prop="operatType" label="经纬度" width="200">
					<template slot-scope="scope">
						{{scope.row.lng+','+scope.row.lat}}
					</template>
				</el-table-column>
				<el-table-column prop="operatType" label="当前位置" width="120">

				</el-table-column>
				<el-table-column prop="satellite" label="定位信号" width="120">
					<template slot-scope="scope">
						{{scope.row.satellite&&parseInt(scope.row.satellite)>1?'强('+scope.row.satellite+')':'弱('+scope.row.satellite+')'}}
					</template>
				</el-table-column>
				<el-table-column prop="signal" label="通信信号" width="120">
					<template slot-scope="scope">
						{{scope.row.signal&&parseInt(scope.row.signal)>1?'强('+scope.row.signal+')':'弱('+scope.row.signal+')'}}
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
	export default {

		name: 'gjlb',
		props: {
			sourceTableData: {
				type: Array,
				default: function() {
					return [];
				},
				required: true
			},
			bottomHeight: {
				type: String,
				default: function() {
					return 37 + 'vh';
				},
				required: true
			},
			nodes: {
				type: Object,
				default: function() {
					return {};
				},
				required: true
			},
			curDay: {
				type: Object,
				default: function() {
					return null;
				},
				required: true
			},
			curIndex: {
				type: Number,
				default: function() {
					return 0;
				},
				required: true
			},
		},
		watch: {
			bottomHeight: function(val) {
				if (val === '37vh') {
					this.tableH = 28
				} else {
					this.tableH = 74
				}
				this.refreshList()
			},
			nodes: function(val) {
				console.log(this.curDay)
			},
			curDay: function(val) {
				console.log(this.nodes)
			},
			curIndex: function(val) {
				this.tableScrollToRow(this.$refs.editTable, val)
			},
			sourceTableData: function(val) {
				this.refreshList()
			}

		},

		data() {
			return {
				
				tableH: 28,
				tableData: [],
				scollBoxHeight: 0, //假滚动条的高度
				scrollTopRowCount: 0, //一共向上滚动了多少行
				elTableHeight: '', //el-table的高度
				theadHeight: '', //表头的高度
				contentHeight: 0, //主要内容高度
				showRowCount: 0, //一共能显示多少行 
				falseBox: 0, //后边假盒子的高度
				pageInfo: {
					page: 1,
					total: 0,
					size: 20
				}
			}
		},
		methods: {
			tableAddClass({
				row,
				rowIndex
			}) {
				//  rowIndex 表示哪一行
				if (rowIndex === this.curIndex) {
					return 'tr-red';
				}
				return '';
			},
			tableScrollToRow(tableElement, rowIndex) {
				const theTableRows = tableElement.bodyWrapper.querySelectorAll('.el-table__body tbody .el-table__row')
				let scrollTop = 0
				for (let i = 0; i < theTableRows.length; i++) {
					if (i === rowIndex) {
						break
					}
					scrollTop += theTableRows[i].offsetHeight
				}
				tableElement.bodyWrapper.scrollTop = scrollTop
			},
			refreshList() {
				let that = this;
				this.scollBoxHeight = 45 * this.sourceTableData.length + 45; //多加一行，要不然滚动到底差一行
				this.$nextTick(() => {
					this.elTableHeight = document.querySelector('.table-box .el-table').offsetHeight;
					this.theadHeight = document.querySelector('.table-box .el-table__header-wrapper').offsetHeight;
					this.contentHeight = this.elTableHeight - this.theadHeight;
					this.showRowCount = Math.floor(this.contentHeight / 45);
					// 获取默认显示的前 <showRowCount> 条
					this.tableData = JSON.parse(JSON.stringify(this.sourceTableData)).splice(0, this.showRowCount);
				})

				this.falseBox = document.querySelector('.false-box');
				this.falseBox.addEventListener('scroll', function(e) {
					that.scrollTopRowCount = Math.ceil(e.target.scrollTop / 45);
					// 获取从索引<scrollTopRowCount> 开始 <showRowCount> 条
					that.tableData = JSON.parse(JSON.stringify(that.sourceTableData)).splice(that
						.scrollTopRowCount, that
						.showRowCount);
				});


			}
		},

		mounted() {
			this.refreshList()
		}


	}
</script>

<style lang="scss" scoped>
	.box {
		width: 1000px;
		overflow: hidden;
		position: relative;

		.false-box {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0%;
			left: 0%;
			overflow: auto;

			.scroll-box {
				width: 100%;
				height: 1000px;
				position: absolute;
				top: 0%;
				left: 0%;
			}
		}

		.table-box {
			width: calc(100% - 20px);
			height: 100%;
			position: absolute;
			top: 0%;
			left: 0%;
		}
	}

	::v-deep .el-table {
		width: 100%;
		height: 100%;

		.el-table__row {
			height: 45px;

			td {
				padding: 0px
			}
		}
	}
</style>

<style scoped>
	/deep/.el-table .tr-red {
		background: #459AF3 !important;
		color: #fff !important;
	}
</style>